<template>
  <div>
    <Drawer title="Basic Drawer" placement="right" :closable="false" v-model="showValue" width="78"
      @on-visible-change="onVisibleChange" style="z-index:999999">
      <div class="titleBox" style="height:29px" slot="header">营养分析</div>
      <div class="contentBox">
        <div class="contentBox-top" ref="element">
          <div class="contentBox-top-item" style="height:calc(50vh - 89px)">
            <div class="contentBox-top-item-ab">
              <div>
                <div style="font-size: 18px;font-weight: 600;color: #000000;">
                  伙食费分析图
                </div>
                <div style="font-size: 12px;color: #666666;font-weight: 400;">
                  实际伙食费标准伙食费对比统计图
                </div>
              </div>
              <!-- <div class="barBox">
                                <div class="barBox-item" style="margin-right:20px;">
                                    <div class="barBox-item-bar" style="background:#49AFFF"></div>
                                    <div>标准伙食费</div>
                                </div>
                                <div class="barBox-item">
                                    <div class="barBox-item-bar" style="background:#FFD966"></div>
                                    <div>实际伙食费</div>
                                </div>
                            </div> -->
            </div>
            <div id="containerFirst" style="width:100%;margin-top:20px" :style="{
			height: 'calc(50vh - 109px)',
			width: 'calc(39vw - 60px)'
		}"></div>
          </div>
          <div class="contentBox-top-item" style="height:calc(50vh - 89px)">
            <div class="contentBox-top-item-ab">
              <div>
                <div style="font-size: 18px;font-weight: 600;color: #000000;">
                  食谱热量分析图
                </div>
                <div style="font-size: 12px;color: #666666;font-weight: 400;">
                  实际热量标准热量对比统计图
                </div>
              </div>
              <!-- <div class="barBox">
                                <div class="barBox-item" style="margin-right:20px;">
                                    <div class="barBox-item-bar" style="background:#49AFFF"></div>
                                    <div>标准热量</div>
                                </div>
                                <div class="barBox-item">
                                    <div class="barBox-item-bar" style="background:#66D9A9"></div>
                                    <div>实际热量</div>
                                </div>
                            </div> -->
            </div>
            <div id="container2" style="width:100%;margin-top:20px" :style="{
			height: 'calc(50vh - 109px)',
			width: 'calc(39vw - 60px)'
		}"></div>
          </div>
        </div>
        <div class="contentBox-bottom">
          <div class="contentBox-bottom-item">
            <div class="contentBox-top-item-ab">
              <div>
                <div style="font-size: 18px;font-weight: 600;color: #000000;">
                  食谱营养素产热比
                </div>
                <div style="font-size: 12px;color: #666666;font-weight: 400;">
                  食谱营养素产热比饼图
                </div>
              </div>
              <div></div>
            </div>
            <div id="container3" style="width:100%;margin-top:20px" :style="{
			height: 'calc(50vh - 109px)',
			width: 'calc(29vw - 100px)'
		}"></div>
          </div>
          <div class="contentBox-bottom-item">
            <div class="contentBox-top-item-ab">
              <div>
                <div style="font-size: 18px;font-weight: 600;color: #000000;">
                  食谱三餐热能比
                </div>
                <div style="font-size: 12px;color: #666666;font-weight: 400;">
                  食谱三餐热能比饼图
                </div>
              </div>
              <div></div>
            </div>
            <div id="container4" style="width:100%;margin-top:20px" :style="{
			height: 'calc(50vh - 109px)',
			width: 'calc(29vw - 100px)'
		}"></div>
          </div>
          <div class="contentBox-bottom-item">
            <div class="contentBox-top-item-ab">
              <div>
                <div style="font-size: 18px;font-weight: 600;color: #000000;">
                  食谱蛋白质分析图
                </div>
                <div style="font-size: 12px;color: #666666;font-weight: 400;">
                  食谱蛋白质饼图
                </div>
              </div>
              <div></div>
            </div>
            <div id="container5" style="width:100%;margin-top:20px" :style="{
			height: 'calc(50vh - 109px)',
			width: 'calc(29vw - 100px)'
		}"></div>
          </div>
        </div>
      </div>
    </Drawer>
  </div>
</template>

<script>
// import { selectailocaldishtype, selectailocalfoodBydish } from "@/api/business/dishesModule";
import * as echarts from 'echarts'
export default {
	components: {},
	name: 'nutritionChart',
	data() {
		return {
			showValue: false,
			chartHeight: 0,
			nums: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
			meal_money: [],
			meal_money_standard: []
		}
	},
	mounted() {
		this.chartHeight = document.querySelector(
			'.contentBox-top-item'
		).offsetHeight
		console.log(this.chartHeight)
	},
	props: {
		dataItem: {
			type: Object,
			default() {
				return {}
			}
		},
		dateList: {
			type: Array,
			default() {
				return []
			}
		},
		props: {
			nutrition: {
				type: Array,
				default() {
					return [
						{ value: 333, name: '糖类' },
						{ value: 333, name: '蛋白质' },
						{ value: 333, name: '脂肪' }
					]
				}
			}
		}
	},
	methods: {
		onVisibleChange(v) {
			if (!v) {
				this.$parent.showNutrition = false
			}
		},
		show() {
			this.showValue = true
			if (this.dataItem.meal_money) {
				let arr = this.$cu.deepClone(this.dataItem.meal_money)
				this.meal_money = []
				this.meal_money_standard = []
				console.log(this.nums)
				this.nums.forEach((item) => {
					this.meal_money.push(arr[item].meal_money)
					this.meal_money_standard.push(arr[item].meal_money_standard)
				})
				this.myChart()
			}
			if (this.dataItem.thermalAnalysis) {
				this.myChart2()
			}
			if (this.dataItem.nutrienter) {
				this.myChart3()
			}

			if (this.dataItem.heatGeneration) {
				this.myChart4()
			}
			if (this.dataItem.highQualityprotein) {
				this.myChart5()
			}
		},
		openFenxi() {},
		myChart() {
			//1.echarts初始化。
			let myChart = echarts.init(document.querySelector('#containerFirst'))
			//2.设置图表配置项
			// 绘制图表
			let option

			option = {
				legend: {
					// orient: 'vertical',
					left: 'right',
					// bottom: '30%',
					padding: [0, 20, 0, 0]
				},
				xAxis: {
					data: this.dateList
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				yAxis: {},
				title: {
					// title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
					subtext: '单位：元',
					right: 20, // 距离左边位置
					top: 10, // 距离上面位置
					subtextStyle: {
						// 设置二级标题的样式
						color: '#baf'
					}
				},
				series: [
					{
						type: 'bar',
						name: '标准',
						data: this.meal_money_standard ? this.meal_money_standard : [],
						itemStyle: {
							normal: {
								color: '#49AFFF',
								label: {
									show: true,
									position: 'top',
									color: '#49AFFF'
								}
							}
						}
					},
					{
						type: 'bar',
						name: '实际',
						data: this.meal_money ? this.meal_money : [],
						itemStyle: {
							normal: {
								color: '#FFD966',
								label: {
									show: true,
									position: 'top',
									color: '#FFD966'
								}
							}
						}
					}
				]
			}
			option && myChart.setOption(option)
			window.onresize = function() {
				myChart.resize()
			}
		},
		myChart2() {
			//1.echarts初始化。
			let myChart = echarts.init(document.querySelector('#container2'))
			//2.设置图表配置项
			// 绘制图表
			let option
			let thermalAnalysis = []
			if (this.dataItem.thermalAnalysis) {
				thermalAnalysis = this.dataItem.thermalAnalysis.thermalAnalysisarray.map(
					(item) => parseFloat(item.toFixed(2))
				)
			}
			let standardThermalAnalysisarray = []
			if (this.dataItem.thermalAnalysis) {
				standardThermalAnalysisarray = this.dataItem.thermalAnalysis.standardThermalAnalysisarray.map(
					(item) => parseFloat(item)
				)
			}
			option = {
				legend: {
					// orient: 'vertical',
					left: 'right',
					// bottom: '30%',
					padding: [0, 20, 0, 0]
				},
				xAxis: {
					data: this.dateList
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				yAxis: {},
				title: {
					// title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
					subtext: '单位：千卡',
					right: 20, // 距离左边位置
					top: 10, // 距离上面位置
					subtextStyle: {
						// 设置二级标题的样式
						color: '#baf'
					}
				},
				series: [
					{
						type: 'bar',
						name: '标准',
						data: standardThermalAnalysisarray,
						itemStyle: {
							normal: {
								color: '#49AFFF',
								label: {
									show: true,
									position: 'top',
									color: '#49AFFF'
								}
							}
						}
					},
					{
						type: 'bar',
						name: '实际',
						data: thermalAnalysis,
						itemStyle: {
							normal: {
								color: '#66D9A9',
								label: {
									show: true,
									position: 'top',
									color: '#66D9A9'
								}
							}
						}
					}
				]
			}
			option && myChart.setOption(option)
			window.onresize = function() {
				myChart.resize()
			}
		},
		myChart3() {
			//1.echarts初始化。
			let myChart = echarts.init(document.querySelector('#container3'))
			//2.设置图表配置项
			// 绘制图表
			let option

			option = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'right',
					bottom: '30%',
					padding: [0, 20, 0, 0]
				},
				series: [
					{
						name: '食谱营养素产热比',
						type: 'pie',
						radius: '60%',
						center: ['40%', '60%'],
						data: [
							{
								value: this.dataItem.nutrienter
									? this.dataItem.nutrienter[0]
									: 0,
								name: '蛋白质'
							},
							{
								value: this.dataItem.nutrienter
									? this.dataItem.nutrienter[1]
									: 1,
								name: '脂肪'
							},
							{
								value: this.dataItem.nutrienter
									? this.dataItem.nutrienter[2]
									: 2,
								name: '糖类'
							}
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						label: {
							normal: {
								show: true,
								position: 'inner', // 数值显示在内部
								formatter: '{b}\n{d}%' // 格式化数值百分比输出
							}
						},
						labelLine: {
							//删除指示线
							show: false
						}
					}
				]
			}
			option && myChart.setOption(option)
			window.onresize = function() {
				myChart.resize()
			}
		},
		myChart4() {
			//1.echarts初始化。
			let myChart = echarts.init(document.querySelector('#container4'))
			//2.设置图表配置项
			// 绘制图表
			let option

			option = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'right',
					bottom: '30%',
					padding: [0, 20, 0, 0]
				},
				series: [
					{
						name: '食谱营三餐热能比',
						type: 'pie',
						radius: '60%',
						center: ['40%', '60%'],
						data: [
							{
								value: this.dataItem.heatGeneration
									? this.dataItem.heatGeneration[0]
									: 0,
								name: '早餐'
							},
							{
								value: this.dataItem.heatGeneration
									? this.dataItem.heatGeneration[1]
									: 1,
								name: '午餐'
							},
							{
								value: this.dataItem.heatGeneration
									? this.dataItem.heatGeneration[2]
									: 2,
								name: '晚餐'
							}
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						label: {
							normal: {
								show: true,
								position: 'inner', // 数值显示在内部
								formatter: '{b}\n{d}%' // 格式化数值百分比输出
							}
						},
						labelLine: {
							//删除指示线
							show: false
						}
					}
				]
			}
			option && myChart.setOption(option)
			window.onresize = function() {
				myChart.resize()
			}
		},
		myChart5() {
			//1.echarts初始化。
			let myChart = echarts.init(document.querySelector('#container5'))
			//2.设置图表配置项
			// 绘制图表
			let option

			option = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'right',
					bottom: '30%',
					padding: [0, 20, 0, 0]
				},
				series: [
					{
						name: '蛋白质分析图',
						type: 'pie',
						radius: '60%',
						center: ['40%', '60%'],
						data: [
							{
								value: this.dataItem.highQualityprotein
									? this.dataItem.highQualityprotein[0]
									: 0,
								name: '优质蛋白质'
							},
							{
								value: this.dataItem.highQualityprotein
									? this.dataItem.highQualityprotein[1]
									: 1,
								name: '一般蛋白质'
							}
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						label: {
							normal: {
								show: true,
								position: 'inner', // 数值显示在内部
								formatter: '{b}\n{d}%' // 格式化数值百分比输出
							}
						},
						labelLine: {
							//删除指示线
							show: false
						}
					}
				]
			}
			option && myChart.setOption(option)
			window.onresize = function() {
				myChart.resize()
			}
		}
	}
}
</script>

<style scoped lang="less">
/deep/.ivu-drawer-wrap {
	z-index: 9999999 !important;
}

/deep/.ivu-drawer-mask {
	z-index: 9999999 !important;
}

/deep/.ivu-drawer-body {
	padding: 0 !important;
}

.titleBox {
	height: 57px;
	background: #ffffff;
	padding: 0 24px;
	display: flex;
	align-items: center;
	font-size: 18px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #222222;
}

.contentBox {
	height: 100%;
	padding: 40px;
	background-color: #f2f5f9;
	display: flex;
	flex-direction: column;

	&-top {
		// height: 48%;
		display: flex;
		justify-content: space-between;

		&-item {
			width: 49%;
			// height: 100%;
			background: #ffffff;
			position: relative;

			&-ab {
				height: 12%;
				position: absolute;
				width: 100%;
				top: 10px;
				display: flex;
				justify-content: space-between;
				padding: 0 3%;
			}
		}
	}

	&-bottom {
		margin-top: 2%;
		flex: 1;
		display: flex;
		justify-content: space-between;

		&-item {
			width: 32%;
			height: 100%;
			background: #ffffff;
			position: relative;
		}
	}
}

.barBox {
	display: flex;

	&-item {
		display: flex;
		align-items: center;

		&-bar {
			width: 10px;
			height: 10px;
			background: red;
			margin-right: 10px;
		}

		div {
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
	}
}
</style>
